﻿<template>
  <div v-loading="loading" class="module-content">
    <div class="module-title">
      <span>{{this.$route.meta.title}}</span>
    </div>
    <div class="region-main">
      <!-- 查询条件及按钮 -->
      <div class="serach-add">
        <el-input
          size="small"
          style="width:200px"
          placeholder="关键字"
          maxlength="30"
          clearable
          v-model="query"
          @change="getList(true)"
        ></el-input>
        <el-button type="primary" v-show="btnAuth.lst.result" @click="getList(true)">查询</el-button>
        <!-- 右侧功能按钮 -->
        <div class="btn-function">
          <el-button type="primary" v-show="btnAuth.add.result" @click="btnAdd()">添加</el-button>
          <el-button type="primary" v-show="btnAuth.del.result" @click="btnDel()">删除</el-button>
          <el-button type="primary" v-show="btnAuth.add.result" @click="btnExport()">导出</el-button>
          <el-button type="primary" v-show="btnAuth.add.result" @click="btnImport()">导入</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="datatable">
        <template>
          <el-table
            @selection-change="mulSelect"
            @sort-change="sortTable"
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column prop="id" label="id" sortable="custom" width="80"></el-table-column>
            <el-table-column prop="njId" label="年级id" min-width="80" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="zyId" label="专业id" min-width="80" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column
              prop="xzbdm"
              label="行政班代码"
              min-width="160"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="xzbmc"
              label="行政班名称"
              min-width="160"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="jbny" label="建班年月" min-width="160" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column
              prop="bzrgh"
              label="班主任工号"
              min-width="160"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="jsbh" label="教室编号" min-width="160" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="bzxh" label="班长学号" min-width="160" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="jxjh" label="教学计划" min-width="160" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="jgh" label="机构号" min-width="160" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="xqdm" label="学期代码" min-width="160" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="zybh" label="专业编号" min-width="160" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column
              prop="description"
              label="描述"
              min-width="160"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="sortNo"
              label="排序数字"
              min-width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              min-width="160"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="updateTime"
              label="最后修改时间"
              min-width="160"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="valid" label="是否有效" min-width="80" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column
              prop="deleted"
              label="是否删除"
              min-width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="createrId"
              label="创建人编号"
              min-width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="createrName"
              label="创建人名称"
              min-width="160"
              :show-overflow-tooltip="true"
            ></el-table-column>

            <el-table-column fixed="right" label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  v-show="btnAuth.det.result"
                  size="small"
                  type="text"
                  @click="btnView(scope.row)"
                >查看</el-button>
                <el-button
                  v-show="btnAuth.mod.result"
                  size="small"
                  type="text"
                  @click="btnMod(scope.row)"
                >编辑</el-button>
                <el-button
                  v-show="btnAuth.del.result"
                  size="small"
                  type="text"
                  @click="btnDel(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="pageSizeChange"
          @current-change="currPageChange"
          :current-page="currPage"
          :page-size="pageSize"
          :total="pageTotal"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          layout="prev,pager,next,jumper,sizes,total"
        ></el-pagination>
      </div>
      <!-- 添加编辑等弹窗 -->
      <div>
        <el-dialog
          :title="formOp"
          :visible.sync="dialogFormVisible"
          :close-on-click-modal="false"
          @close="formClose('formModel')"
          top="7vh"
          width="40%"
        >
          <el-form v-loading="loadingForm" :model="formModel" :rules="rules" ref="formModel">
            <el-form-item prop="njId" label="年级" :label-width="filWidth">
              <!-- <el-input
                v-model="formModel.njId"
                auto-complete="off"
                clearable
                maxlength="50"
                show-word-limit
                placeholder="请输入年级id"
              ></el-input>-->

              <el-select v-model="formModel.njId" placeholder="请选择年级">
                <el-option
                  v-for="item in NJList"
                  :key="item.id"
                  :label="item.njmc"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="zyId" label="专业" :label-width="filWidth">
              <!-- <el-input
                v-model="formModel.zyId"
                auto-complete="off"
                clearable
                maxlength="50"
                show-word-limit
                placeholder="请输入专业id"
              ></el-input>-->

              <el-select v-model="formModel.zyId" placeholder="请选择专业">
                <el-option
                  v-for="item in ZYList"
                  :key="item.id"
                  :label="item.zymc"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="xzbdm" label="行政班代码" :label-width="filWidth">
              <el-input
                v-model="formModel.xzbdm"
                auto-complete="off"
                clearable
                maxlength="50"
                show-word-limit
                placeholder="请输入行政班代码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="xzbmc" label="行政班名称" :label-width="filWidth">
              <el-input
                v-model="formModel.xzbmc"
                auto-complete="off"
                clearable
                maxlength="50"
                show-word-limit
                placeholder="请输入行政班名称"
              ></el-input>
            </el-form-item>
            <el-form-item prop="jbny" label="建班年月" :label-width="filWidth">
              <el-date-picker v-model="formModel.jbny" type="date" placeholder="请输入建班年月"></el-date-picker>
            </el-form-item>
            <el-form-item prop="bzrgh" label="班主任工号" :label-width="filWidth">
              <el-input
                v-model="formModel.bzrgh"
                auto-complete="off"
                clearable
                maxlength="200"
                show-word-limit
                placeholder="请输入班主任工号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="jsbh" label="教室编号" :label-width="filWidth">
              <el-input
                v-model="formModel.jsbh"
                auto-complete="off"
                clearable
                maxlength="50"
                show-word-limit
                placeholder="请输入教室编号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="bzxh" label="班长学号" :label-width="filWidth">
              <el-input
                v-model="formModel.bzxh"
                auto-complete="off"
                clearable
                maxlength="200"
                show-word-limit
                placeholder="请输入班长学号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="jxjh" label="教学计划" :label-width="filWidth">
              <el-input
                v-model="formModel.jxjh"
                auto-complete="off"
                clearable
                maxlength="200"
                show-word-limit
                placeholder="请输入教学计划"
              ></el-input>
            </el-form-item>
            <el-form-item prop="jgh" label="机构号" :label-width="filWidth">
              <el-input
                v-model="formModel.jgh"
                auto-complete="off"
                clearable
                maxlength="200"
                show-word-limit
                placeholder="请输入机构号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="xqdm" label="学期代码" :label-width="filWidth">
              <el-input
                v-model="formModel.xqdm"
                auto-complete="off"
                clearable
                maxlength="200"
                show-word-limit
                placeholder="请输入学期代码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="zybh" label="专业编号" :label-width="filWidth">
              <el-input
                v-model="formModel.zybh"
                auto-complete="off"
                clearable
                maxlength="200"
                show-word-limit
                placeholder="请输入专业编号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="description" label="描述" :label-width="filWidth">
              <el-input
                type="textarea"
                v-model="formModel.description"
                auto-complete="off"
                clearable
                maxlength="4000"
                show-word-limit
                placeholder="请输入描述"
              ></el-input>
            </el-form-item>
            <el-form-item prop="sortNo" label="排序数字" :label-width="filWidth">
              <el-input-number v-model="formModel.sortNo" :min="0" label="排序数字"></el-input-number>
            </el-form-item>
            <el-form-item prop="valid" label="是否有效" :label-width="filWidth">
              <el-switch v-model="formModel.valid"></el-switch>
            </el-form-item>
          </el-form>
          <div v-show="!loadingForm" slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button v-show="formOp!=='查看'" type="primary" @click="btnAddOrMod('formModel')">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 文件上传 -->
      <div>
        <el-dialog
          :title="'文件上传'"
          :visible.sync="dfvUploadFile"
          :close-on-click-modal="false"
          @close="uploadClose('文件上传')"
          :data="uploadParam"
          top="7vh"
          width="400px"
        >
          <!-- 导入excel文件 -->
          <upload-file
            :formMaxSize="4"
            :param="uploadParam"
            :uploadFileApi="uploadFileApi"
            :templateUrl="templateUrl"
            :fileType="upFileType"
            tip="只能上传xls/xlsx文件，且不超过4MB"
          ></upload-file>
          <!-- 上传图片文件 -->
          <!-- <upload-file
            :formMaxSize="4"
            :param="uploadParam"
            :fileType="upFileType"
            :uploadFileApi="uploadFileApi"
            tip="只能上传图片文件文件，且不超过4MB"
          ></upload-file>-->
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
// import * as api from '@/api'
import { uploadFileUrl, basePlatformUrl } from '@/config/env'
import * as apiBP from '@/api/basePlatform'
import * as comFunc from '@/utils/common'

export default {
  data () {
    return {
      loading: false,
      loadingForm: false,
      // 按钮权限
      btnAuth: {
        lst: { api: 'baseBJPageList', result: false },
        add: { api: 'baseBJAdd', result: false },
        del: { api: 'baseBJDelete', result: false },
        mod: { api: 'baseBJModify', result: false },
        det: { api: 'baseBJDetail', result: false },
        imp: { api: 'baseBJImport', result: false }
      },
      // 搜索输入
      query: '',
      // 选中的行
      selectRows: [],
      // 排序
      sortCol: '',
      // 当前页码
      currPage: 1,
      // 页尺寸
      pageSize: 10,
      // 页总记录数
      pageTotal: 1,
      // 表格实时数据
      tableData: [],
      // 是否显示表单弹窗
      dialogFormVisible: false,
      // 弹窗输入框label宽度
      filWidth: '70px',
      // 表单数据模型
      formModel: {},
      // 表单添加or编辑or查看
      formOp: '',
      // 表单验证
      rules: {
        xzbdm: [
          { required: true, message: '请输入行政班代码', trigger: 'blur' }
        ],
        xzbmc: [
          { required: true, message: '请输入行政班名称', trigger: 'blur' }
        ]
      },
      // 文件上传弹窗是否显示
      dfvUploadFile: false,
      // 上传文件get参数
      uploadParam: {},
      // 上传文件类型
      upFileType: ['xlsx', 'xls'],
      // upFileType: ['bmp', 'jpg', 'jpeg', 'png', 'tiff', 'gif'],
      // 上传excel接口
      uploadFileApi: basePlatformUrl + '/BasePlatform/Base_BJ/Import',
      // 上传图片接口
      // uploadFileApi: uploadFileUrl + '/Api/File/uploadSaveLocal',
      // 模板url
      templateUrl: uploadFileUrl + '/excel/template/ImportBanJi.xlsx',
      // 模板url
      exportUrl: 'https://localhost:44343/BasePlatform/Base_BJ/ExportExcel',
      NJList: [],
      ZYList: []
    }
  },
  computed: {
    // ...mapState(['adminInfo'])
  },
  components: {
    // 引用组件
  },
  mounted () {
    this.validBtnAuth()
    console.log(this.uploadFileApi)
  },
  methods: {
    // 导出
    btnExport () {
      console.log(this.$store.state.loginInfo)
      // console.log(window.location)
      window.location.href = this.exportUrl +
      '?token=' + this.$store.state.loginInfo.token +
      '&uId=' + this.$store.state.loginInfo.uId +
      '&frontUrl=' + window.location.origin
    },
    // 导入
    btnImport () {
      this.dfvUploadFile = true
    },
    // 添加
    btnAdd () {
      this.formOp = '添加'
      this.formModel = {}
      this.dialogFormVisible = true
    },
    async btnDel (row) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let param = {}
          if (row) {
            param.ids = [row.id]
          } else {
            if (this.selectRows.length === 0) {
              this.$message({
                type: 'error',
                message: '请至少选中一项'
              })
              return
            }
            param.ids = comFunc.getId4ArrayObj(this.selectRows, 'id')
          }
          let res = await apiBP[this.btnAuth.del.api](param, this, 'loading')
          if (res.ok) {
            this.$message({
              type: 'success',
              message: '成功删除' + res.body.delCount + '条数据'
            })
            this.getList()
          }
        })
        .catch(() => {})
    },
    async btnMod (row) {
      let param = { id: row.id }
      let res = await apiBP[this.btnAuth.det.api](param, this, 'loading')
      if (res.ok) {
        this.formOp = '编辑'
        this.formModel = res.body
        this.dialogFormVisible = true
      }
    },
    async btnAddOrMod (formName, noClose) {
      if (this.formOp === '添加') {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            let res = await apiBP[this.btnAuth.add.api](
              this.formModel,
              this,
              'loadingForm'
            )
            if (res.ok) {
              if (!noClose) {
                this.dialogFormVisible = false
                this.getList()
              }
              this.$message({
                type: 'success',
                message: '添加成功'
              })
            }
          } else {
            this.$notify.error({
              title: '错误',
              message: '请检查输入是否正确！',
              offset: 100
            })
            return false
          }
        })
      } else {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            let res = await apiBP[this.btnAuth.mod.api](
              this.formModel,
              this,
              'loadingForm'
            )
            if (res.ok) {
              if (!noClose) {
                this.dialogFormVisible = false
                this.getList()
              }
              this.$message({
                type: 'success',
                message: '编辑成功'
              })
            }
          } else {
            this.$notify.error({
              title: '错误',
              message: '请检查输入是否正确！',
              offset: 100
            })
            return false
          }
        })
      }
    },
    async btnView (row) {
      let param = { id: row.id }
      let res = await apiBP[this.btnAuth.det.api](param, this, 'loading')
      if (res.ok) {
        this.formOp = '查看'
        this.formModel = res.body
        this.dialogFormVisible = true
      }
    },
    mulSelect (rows) {
      this.selectRows = rows
    },
    sortTable (sort) {
      if (sort.order) {
        this.sortCol = sort.prop + '_' + sort.order.replace('ending', '')
      } else {
        this.sortCol = ''
      }
      this.getList()
    },
    // 获取列表 changePage为true会重置currPage
    async getList (changePage) {
      if (!this.btnAuth.lst.result) {
        this.$message({
          type: 'error',
          message: '您没有查看列表权限！'
        })
        return
      }
      if (changePage) {
        this.currPage = 1
      }
      let param = {
        query: this.query,
        pageIndex: this.currPage,
        pageSize: this.pageSize,
        sortCol: this.sortCol
      }

      let res = await apiBP[this.btnAuth.lst.api](param, this, 'loading')
      if (res.ok) {
        this.tableData = res.body.list
        this.pageSize = res.body.pageSize
        this.pageTotal = res.body.total
      }
    },
    formClose (formName) {
      this.$refs[formName].resetFields()
    },
    uploadClose (formName) {

    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getList()
    },
    currPageChange (pageIndex) {
      this.currPage = pageIndex
      this.getList()
    },
    async validBtnAuth () {
      for (let k in this.btnAuth) {
        // console.log(k)
        let r = await apiBP[this.btnAuth[k].api](null, null, null, true)
        if (r) {
          // console.log(r)
          this.btnAuth[k].result = true
        }
      }
      // console.log(this.btnAuth)
      this.getList(true)
    },
    async fetchNJList () {
      let param = {
        pageIndex: 1,
        pageSize: 1000
      }
      let res = await apiBP.baseNJPageList(param, this, 'loading')
      if (res.ok) {
        this.NJList = res.body.list
      }
    },
    async fetchZYList () {
      let param = {
        pageIndex: 1,
        pageSize: 1000
      }
      let res = await apiBP.baseZYPageList(param, this, 'loading')
      if (res.ok) {
        this.ZYList = res.body.list
      }
    }
  },
  created () {
    this.fetchNJList()
    this.fetchZYList()
  }
}
</script>

<style lang="less" scoped>
</style>
